<%--
  User: LiXiaobo  Date: 2020/10/22 Time: 下午3:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
    <style>
        .layui-table-page{
            text-align: center;
        }
    </style>
</head>
<body>


   <div class="layui-main">
       <div class="layui-collapse" lay-accordion>
           <div class="layui-colla-item">
               <h2 class="layui-colla-title">添加查询</h2>
               <div class="layui-colla-content layui-show">
                   <form lay-filter="where" class="layui-form">
                       <div class="layui-form-item layui-inline">
                           <label class="layui-form-label">用户名:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="username"/>
                            </div>
                       </div>
                       <div class="layui-form-item layui-inline">
                           <label class="layui-form-label">角色:</label>
                           <div class="layui-input-inline">
                               <select name="userRole" class="layui-input">
                                   <option value="">--请选择角色--</option>
                               </select>
                           </div>
                       </div>
                       <div class="layui-form-item layui-inline">
                           <label class="layui-form-label">创建时间:</label>
                           <div class="layui-input-inline">
                               <input type="text" class="layui-input" name="startDate" id="startDate"/>
                           </div>
                           <div class="layui-input-inline">
                               <input type="text" class="layui-input" name="endDate" id="endDate"/>
                           </div>
                       </div>
                       <div class="layui-form-item layui-inline">
                           <button class="layui-btn" type="button" onclick="search()">搜索</button>
                       </div>
                   </form>
               </div>
           </div>
       </div>
       <script type="text/html" id="toolbar">
           <div class="layui-btn-container">
               <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
               <button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>
               <button class="layui-btn layui-btn-sm" lay-event="grant">用户授权</button>
           </div>
       </script>
       <table id="userTb" lay-filter="userTb"></table>
       <script type="text/html" id="action">
           <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
           <a class="layui-btn layui-btn-xs" lay-event="attach">上传证件</a>
           <a class="layui-btn  layui-btn-xs" lay-event="del">删除</a>
       </script>
       <div id="attach" style="display:none">
           <form class="layui-form" style="padding-top: 30px">
               <div class="layui-form-item">
                   <label class="layui-form-label">证件照</label>
                   <div class="layui-input-block">
                       <button type="button" class="layui-btn" id="attachUpload">
                           <i class="layui-icon">&#xe67c;</i>上传图片
                       </button>
                   </div>
               </div>
               <div class="layui-form-item">
                   <label class="layui-form-label">描述信息</label>
                   <div class="layui-input-block">
                       <textarea id="attachDescr"  class="layui-textarea" style="width: 80%"></textarea>
                   </div>
               </div>
           </form>
       </div>
       <div id="add" style="display:none">
           <form id="addForm" class="layui-form" lay-filter="addForm" style="padding-top:30px">
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">用户名</label>
                   <div class="layui-input-inline">
                       <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">角色:</label>
                   <div class="layui-input-inline">
                       <select name="userRole" class="layui-input">
                           <option value="">--请选择角色--</option>
                       </select>
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">登录名</label>
                   <div class="layui-input-inline">
                       <input type="text" name="userCode" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">密码</label>
                   <div class="layui-input-inline">
                       <input type="text" name="userCode" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">单选框</label>
                   <div class="layui-input-inline">
                       <input type="radio" name="gender" value="1" title="男">
                       <input type="radio" name="gender" value="2" title="女" checked>
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">生日</label>
                   <div class="layui-input-inline">
                       <input type="text"id="aaa" name="birthday" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">电话</label>
                   <div class="layui-input-inline">
                       <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">地址</label>
                   <div class="layui-input-inline">
                       <input type="text" name="address" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
           </form>
       </div>
       <div id="update" style="display:none">
           <form id="updateForm" class="layui-form" lay-filter="updateForm" style="padding-top:30px">
               <input type="hidden" name="id"/>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">用户名</label>
                   <div class="layui-input-inline">
                       <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">角色:</label>
                   <div class="layui-input-inline">
                       <select name="userRole" class="layui-input">
                           <option value="">--请选择角色--</option>
                       </select>
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">登录名</label>
                   <div class="layui-input-inline">
                       <input type="text" name="userCode" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">密码</label>
                   <div class="layui-input-inline">
                       <input type="text" name="userCode" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">单选框</label>
                   <div class="layui-input-inline">
                       <input type="radio" name="gender" value="1" title="男">
                       <input type="radio" name="gender" value="2" title="女" checked>
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">生日</label>
                   <div class="layui-input-inline">
                       <input type="text"id="bbb" name="birthday" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">电话</label>
                   <div class="layui-input-inline">
                       <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item layui-inline">
                   <label class="layui-form-label">地址</label>
                   <div class="layui-input-inline">
                       <input type="text" name="address" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
           </form>
       </div>
   </div>
   <script src="webjars/layui/2.5.5/layui.js"></script>

   <script>
     layui.use(["jquery","laydate"],function(){
         let $=layui.$;
         $.get('/sys/role/list').done(({data})=>{
               data.forEach((r)=>{
                   let opt=$("<option/>");
                   opt.text(r.roleName);
                   opt.val(r.id);
                   opt.appendTo("[name=userRole]");
               });
         });
         let laydate=layui.laydate;
         laydate.render({
             elem:"#startDate"
         });
         laydate.render({
             elem:"#endDate"
         });
         laydate.render({
             elem:"#aaa",
             trigger:"click"
         });
         laydate.render({
             elem:"#bbb",
             trigger:"click"
         });
     });
     layui.use(["table","element"],function(){
         let table=layui.table;
         table.render({
             id:"userTb",
             elem:"#userTb",
             url:"sys/user/list",
             toolbar:"#toolbar",
             page:{
                 limit:5,
                 limits:[5,10,15]
             },
             cols:[[
                 {type:"checkbox"},
                 {field:"username",width:180,title:"名称"},

                 {field:"gender",title:"性别",width:60,
                     templet(d){
                        return d.gender==1?"男":"女";
                     }
                 },
                 {field:"birthday",width:180,title:"生日",sort:true},
                 {field:"phone",width:180,title:"电话"},
                 {field:"attachPath",width:80,title:"工作照",templet:"<div><img src='' width='50'/></div>"},
                 {field:"creationDate",width:180,title:"创建时间"},
                 {title:"操作",fixed: 'right', width:'200',align:'center', toolbar: '#action'}
             ]]
         });
         table.on('tool(userTb)',function(obj){
             switch (obj.event){
                 case "attach":
                     updateAttach(obj.data);
                     break;
                 case "del":
                     del(obj);
                     break;
                 case "update":
                     update(obj);
                     break;
             }
         });
         table.on('toolbar(userTb)',function({event}){
             switch (event){
                 case "add":
                     add();
                     break;
                 case "batchDel":
                     batchDel();
                     break;
             }
         })

     });
     function search(){
         layui.use(["form","table"],function(){
             let form=layui.form;
             let where=form.val("where");
             layui.table.reload("userTb",{where});
         });
     }
     function updateAttach(data){
         layui.use(['layer','upload','jquery','table'], function(){
             let layer = layui.layer;
             let $=layui.$;
             let params={};
             layer.open({
                 type:1,
                 skin:"layui-layer-molv",
                 offset:'t',
                 content:$("#attach"),
                 title:"上传证件",
                 area:"500px",
                 btn:['确定','取消'],
                 yes(){
                      params.id=data.id;
                      params.attachDescr=$("#attachDescr").val();
                      $.ajax({
                          url:"/sys/user/updateAttach",
                          contentType:"application/json",
                          data:JSON.stringify(params),
                          type:"post",
                      }).done(function(){
                            layui.table.reload("userTb");
                            layer.close(layer.index);
                      });
                 }
             });
             let upload=layui.upload;
             upload.render({
                 elem:"#attachUpload",
                 url:"/sys/user/uploadAttach",
                 done:function(res){
                     params.attachPath=res.data.attachPath;
                 }
             });
         });
     }
     function add(){
         layui.use(["layer","jquery","form","table"],function (){
            let layer=layui.layer;
            let $=layui.$;
            $("#addForm")[0].reset();
            layer.open({
                type:1,
                skin:"layui-layer-molv",
                offset:'t',
                content:$("#add"),
                title:"添加用户",
                area:"700px",
                btn:['确定','取消'],
                yes(){
                   let json=  layui.form.val("addForm");
                   $.post("/sys/user/add",json).done(({msg})=>{
                        layui.table.reload("userTb");
                        layer.close(layer.index);
                        layer.msg(msg);
                   });
                }
            });
         });
     }
     function update(obj){
         layui.use(["layer","jquery","form","table"],function (){
             let layer=layui.layer;
             let $=layui.$;
            layui.form.val('updateForm',obj.data);
             layer.open({
                 type:1,
                 skin:"layui-layer-molv",
                 offset:'t',
                 content:$("#update"),
                 title:"修改用户",
                 area:"700px",
                 btn:['确定','取消'],
                 yes(){
                     let json=  layui.form.val("updateForm");
                     $.post("/sys/user/update",json).done(({msg})=>{
                         //layui.table.reload("userTb");
                         let formData=layui.form.val('updateForm');
                         obj.update(formData);
                         layer.close(layer.index);
                         layer.msg(msg);
                     });
                 }
             });
         });
     }
     function batchDel(){
         layui.use(["table","layer","jquery"],function (){
             let layer=layui.layer;
             let arr=layui.table.checkStatus("userTb").data;
             if(arr.length==0){
                 layer.alert("至少选择一项待删除!");
                 return;
             }
             layer.confirm('确实要删除么',{icon:3},function(index){

                // let params= arr.map(obj=>"ids="+obj.id).join("&");


                 let ids=arr.map(obj=>obj.id);


               layui.$.get("/sys/user/batchDel?ids="+ids).done(({msg})=>{
                     layer.close(index);
                     layui.table.reload('userTb');
                     layer.msg(msg);
                 });


             });
         });
     }
     function del(obj){
         layer.confirm('确实要删除么',{icon:3},function(index){
             layui.$.get("/sys/user/del?id="+obj.data.id).done(({msg})=>{
                 layer.close(index);
                 //layui.table.reload('userTb');
                 obj.del();
                 layer.msg(msg);
             });


         });
     }
   </script>


<script>





</script>
</body>
</html>
